<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css">
		<link rel="stylesheet" href="css/mui.picker.min.css" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-avatar {
				width: 75px;
			}
			
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			
			.oa-contact-content {
				width: 100%;
			}
			
			.oa-contact-name {
				margin-right: 20px;
			}
			
			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
			
			.mui-bar {
				background-color: #853390 !important;
			}
			
			.mui-title {
				color: #f7e9e9 !important;
			}
			
			.mui-bar-tab .mui-tab-item {
				color: #f7e9e9 !important;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #f9f416 !important;
			}
			
			.mui-input-group .mui-input-row {
				height: 100%;
			}
			
			.mui-input-row textarea {
				height: 100px;
				margin-bottom: 0 !important;
				padding-bottom: 0 !important;
			}
			/*wd*/
			
			.site-wd-title {
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				position: relative;
			}
			
			.site-wd-title img {
				height: 70px;
				width: 70px;
				border: 0;
				margin-right: 20px;
				border-radius: 50%;
			}
			
			.site-wd-cell {
				position: relative;
				overflow: hidden;
				padding: 11px 15px;
				-webkit-touch-callout: none;
			}
			
			.site-wd-cell p {
				text-align: right;
				font-size: 12px;
				margin: 0;
				color: #8f8f94;
			}
			
			.site-wd-nr {}
			/*wd*/
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#love">
				<span class="mui-icon iconfont icon-02"></span>
				<span class="mui-tab-label">一见钟情</span>
			</a>
			<a class="mui-tab-item" href="#fabu">
				<span class="mui-icon iconfont icon-fabu"></span>
				<span class="mui-tab-label">我要征婚</span>
			</a>
			<a class="mui-tab-item" href="#mine">
				<span class="mui-icon iconfont icon-ziyuan"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">个人中心</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="love" class="mui-control-content  mui-active">
				<header class="mui-bar mui-bar-nav">
					<h1 id="title" class="mui-title">一见钟情</h1>
				</header>
				<div class="mui-content">
					<div class="mui-card">
						<div class="mui-card-header mui-card-media" style="height:80vw;background-image:url(images/1.jpg)"></div>
						<div class="mui-card-content">
							<div class="mui-card-content-inner">
								<p>姓名：晓霞&nbsp;&nbsp;年龄：18岁</p>
								<p style="color: #333;">签名：爱一个人好难...</p>
							</div>
						</div>
						<div class="mui-card-footer">
							<a class="mui-card-link">
								<!--<i class="mui-icon mui-icon-eye"></i>-->关注(12)</a>
							<a class="mui-card-link" href="person.html">查看</a>
						</div>
					</div>
					<div class="mui-card">
						<div class="mui-card-header mui-card-media" style="height:80vw;background-image:url(images/2.jpg)"></div>
						<div class="mui-card-content">
							<div class="mui-card-content-inner">
								<p>姓名：晓霞&nbsp;&nbsp;年龄：保密</p>
								<p style="color: #333;">签名：爱一个人好难...</p>
							</div>
						</div>
						<div class="mui-card-footer">
							<a class="mui-card-link">
								<!--<i class="mui-icon mui-icon-eye"></i>-->关注(5)</a>
							<a class="mui-card-link" href="person.html">查看</a>
						</div>
					</div>

				</div>
			</div>
			<div id="fabu" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<h1 id="title" class="mui-title">我要征婚</h1>
					<a href="#" class="mui-icon mui-icon-navigate mui-pull-right" style="color:#f7e9e9;"></a>
				</header>
				<div class="mui-content">
					<h5>请填写您的个人信息，点击右上角保存：</h5>
					<form class="mui-input-group">
						<div class="mui-input-row">
							<label>姓名</label>
							<input type="text" class="mui-input-clear" placeholder="请输入姓名">
						</div>
						<div class="mui-input-row">
							<label>生日</label>
							<input type="text" id="shengri" class="mui-input-clear" placeholder="请输入生日" data-options='{"type":"date"}' readonly="readonly">
						</div>
						<div class="mui-input-row mui-radio ">
							<label>男</label>
							<input name="radio1" type="radio">
						</div>
						<div class="mui-input-row mui-radio">
							<label>女</label>
							<input name="radio1" type="radio" checked>
						</div>
						<div class="mui-input-row">
							<label>住址</label>
							<input type="text" id="address" class="mui-input-clear" placeholder="请输入住址" data-options='{"type":"date"}' readonly="readonly">
						</div>
						<div class="mui-input-row">
							<label>手机</label>
							<input type="text" class="mui-input-clear" placeholder="请输入手机">
						</div>
						<div class="mui-input-row">
							<label>微信号</label>
							<input type="text" class="mui-input-clear" placeholder="微信号">
						</div>
						<div class="mui-input-row">
							<textarea class="mui-input-clear" placeholder="签名..."></textarea>
						</div>
						<div class="mui-input-row">
							<textarea class="mui-input-clear" placeholder="个人简介..."></textarea>
						</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								联系方式是否保密
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								出生日期是否保密
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								仅展示第一张照片
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<div style="height: auto;width: 100%;margin: 5px 0;text-align: center;">
							<button type="button" class="mui-btn mui-icon mui-icon-camera">上传照片</button>
							<h5>(<small>请上传真实的生活照,最多上传3张照片。</small>) </h5>

							<div style="height: auto;width: 100%;padding: 2px 15px;">
								<div style="height:auto;width: 100%;">
									<img src="images/2.jpg" style="height:auto;width: 100%;" />
									<a href="#" class="mui-icon mui-icon-trash"></a>
								</div>
								<div style="height:auto;width: 100%;">
									<img src="images/1.jpg" style="height:auto;width: 100%;" />
									<a href="#" class="mui-icon mui-icon-trash"></a>
								</div>
							</div>

						</div>
						<!--	<div class="mui-button-row">
							<button type="button" class="mui-btn mui-btn-primary">提交</button>
						</div>-->
					</form>
				</div>
			</div>
			<div id="mine" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<h1 id="title" class="mui-title">个人中心</h1>
				</header>
				<div class="mui-content">
					<div class="site-wd-title">
						<div class="site-wd-cell mui-media">
							<div>
								<img class="mui-pull-left" src="images/tx.png">
								<div class="site-wd-nr">
									<span style="font-size: 14px;">
										123456
									</span>
									<p class="mui-ellipsis" style="height: 20px;line-height: 20px;">
										个人信息 <span class="mui-icon iconfont icon-zhanghu"></span>
									</p>
									<span style="font-size: 12px;height: 20px;line-height: 20px; color: red;">
										<span class="mui-icon icon iconfont icon-huiyuan"></span>25&nbsp;魅力值
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="mui-card">
						<ul class="mui-table-view">
							<li class="mui-table-view-divider">动态</li>
							<!--	<li class="mui-table-view-cell">已购买<span class="mui-badge mui-badge-primary">14</span></li>-->
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="mail.html">
									<span class="mui-badge mui-badge-danger">0</span>收到私信
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="histroy.html">
									<span class="mui-badge mui-badge-danger">0</span>已发私信
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="focus.html">
									<span class="mui-badge mui-badge-danger">0</span>已关注
								</a>
							</li>
							<li class="mui-table-view-divider">我要反馈</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="words.html">
									留言
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									关于
								</a>
							</li>
							<!--<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									拨打电话
								</a>
							</li>-->
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/mui.picker.min.js"></script>
	<script src="js/mui.poppicker.js"></script>
	<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" charset="utf-8">
		//http://www.jb51.net/article/99479.htm http://blog.csdn.net/sun2015_07_24/article/details/51445844
		//mui初始化
		//mui.init();
		(function($, doc) {
			$.init();
			var result = $('#shengri')[0];
			var btns = $('#shengri');
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var _self = this;
					if(_self.picker) {
						_self.picker.show(function(rs) {
							result.value = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					} else {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						_self.picker = new $.DtPicker(options);
						_self.picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							result.value = rs.text;
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							_self.picker.dispose();
							_self.picker = null;
						});
					}

				}, false);
			});

			$.ready(function() {
				var _getParam = function(obj, param) {
					return obj[param] || '';
				};

				//					//级联示例
				var cityPicker3 = new $.PopPicker({
					layer: 3
				});
				cityPicker3.setData(cityData3);
				var showCityPickerButton = doc.getElementById('address');
				var cityResult3 = doc.getElementById('address');
				showCityPickerButton.addEventListener('tap', function(event) {
					cityPicker3.show(function(items) {
						cityResult3.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				}, false);

			})
		})(mui, document);
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			//	alert(targetTab)
		});
	</script>

</html>